/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use 'sass:map';
@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
@use './constants' as constants;
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
@use '../internal/styles/foundation' as foundation;

.link {
  @include styles.styles-reset;
  display: inline;
  white-space: inherit;

  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
    var(#{custom-props.$styleFocusRingBorderWidth}, awsui.$border-link-focus-ring-shadow-spread)
    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);

  @include styles.link-default;

  @each $variant in map.keys(constants.$link-variants) {
    &.variant-#{$variant} {
      @if $variant == 'info' or $variant == 'top-navigation' {
        @include styles.font-smoothing;
      }
      @if $variant == 'secondary' {
        -webkit-font-smoothing: inherit;
        -moz-osx-font-smoothing: inherit;
      }
      @include styles.link-variant-style(map.get(constants.$link-variants, $variant));
    }
  }

  &.button {
    @include styles.font-smoothing;
    @include styles.link-variant-style(map.get(constants.$link-styles, 'button'));
  }

  &.color-inverted {
    color: awsui.$color-text-notification-default;
    &:not(.button) {
      text-decoration-line: underline;
      text-decoration-color: currentColor;
    }
    &:hover {
      color: awsui.$color-text-link-inverted-hover;
    }
  }

  @include focus-visible.when-visible {
    @include styles.link-focus(
      $border-color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused),
      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
      $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
    );
  }

  @each $font-size, $properties in constants.$link-font-sizes {
    &.font-size-#{$font-size} {
      @include styles.font($font-size);
      @include styles.link-font-size-style(map.get(constants.$link-font-sizes, $font-size));
    }
  }
}

.icon-wrapper {
  white-space: nowrap;
}

.icon {
  display: inline-block;
}
